<template>
  <div class="grid-setting" id="grid-setting">
    <el-radio-group v-model="activeSetting" size="mini" >
      <el-radio-button label="gridSetting" >Grid Option</el-radio-button>
      <el-radio-button label="columnsSetting"  >Columns Setting</el-radio-button>
      <!--<el-radio-button label="event">Event</el-radio-button>-->
    </el-radio-group>
    <el-form ref="gridSetting" :model="setting" label-position="top" v-show="activeSetting==='gridSetting'" style="height:auto;">
      <el-form-item label="Parent Field">
        <el-select v-model="setting.report.subtasks" clearable style="width:80%;" @change="subtasksChange" :placeholder="$t('custom.component.gadget.parentfield')">
            <el-option v-for="(item,index) in dataSourceColumns" :key="index"  :label="item" :value="item"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="Child Field">
        <el-select v-model="setting.report.groupFields" clearable style="width:80%;" @change="groupFieldsChange" :placeholder="$t('custom.component.gadget.childfield')">
            <el-option v-for="(item,index) in dataSourceColumns" :key="index"  :label="item" :value="item"></el-option>
          </el-select>
      </el-form-item>
    </el-form>
    <div v-show="activeSetting==='columnsSetting'">
      <el-switch v-model="expandAllColumn" active-text="Expand All" inactive-text="" @change="expandAll"></el-switch>
      <draggable handle=".mover" filter=".edititem" v-model="setting.report.columns"  chosenClass="chosen" forceFallback="true" animation="1000">
       <transition-group>
          <div class="item_drag" v-for="(item,index) in setting.report.columns" :key="item.field">
                <el-card class="column-card" >
              <el-row type="flex" class="row-bg mover">
                <el-col :span="16">
                  <div>
                    <span class="column-field">{{item.field}} </span><i class="column-type">: {{item.type}}</i>
                  </div>
                  </el-col>
                <el-col :span="8">
                  <div style="float:right">
                    <el-tooltip class="item" effect="dark" :content="item.visible ? 'Display Column ' : 'Hide Column'" placement="bottom-end">
                      <el-link style="float: left; border: none;" :underline="false" @click.native="toggleVisible(index, item.visible)"><i v-bind:class="[item.visible ? 'cuifont icon_eye_show': 'cuifont icon_eye_hide','edititem']" style="margin-left: 5px;"></i></el-link>
                    </el-tooltip>
                    <el-link style="margin-left:5px" class="column-link edititem" :underline="false" @click.native="showSettingClick(index, item.showSetting)"><i v-bind:class="[item.showSetting ? 'el-icon-arrow-up': 'el-icon-arrow-down']" style="margin-left: 5px;"></i></el-link>
                  </div>
                </el-col>
              </el-row>
                  <el-form label-position="left" v-show="item.showSetting" label-width="120px" style="border-top: 1px solid #EBEEF5;padding-top: 10px;">
                    <input hidden name="field" v-model="item.field" />
                    <el-form-item label="Header Text" style="margin-bottom: 5px;">
                      <el-input v-model="item.headerText"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="Header tooltip" style="margin-bottom: 5px;margin-top: 5px;">
                      <el-input v-model="item.headerTextTooltip"></el-input>
                    </el-form-item> -->
                    <el-form-item label="Text Align">
                      <el-select v-model="item.textAlign" placeholder="Please select">
                        <el-option label="Left" value="Left"></el-option>
                        <el-option label="Center" value="Center"></el-option>
                        <el-option label="Right" value="Right"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="Allow Filtering">
                      <el-switch v-model="item.allowFiltering"></el-switch>
                    </el-form-item>
                    <el-form-item label="Disable Html">
                      <el-switch v-model="item.disableHtmlEncode"></el-switch>
                    </el-form-item>
                    <el-tooltip content="Fill in a number to set the column width you need." placement="top-end">
                      <el-form-item label="Max Width">
                        <el-input v-model="item.maxWidth" placeholder="Please Enter Max Width"></el-input>
                      </el-form-item>
                    </el-tooltip>

                  </el-form>
                </el-card>
          </div>
       </transition-group>
      </draggable>
    </div>

  </div>
</template>

<script>
import draggable from 'vuedraggable'
import Index from '../../dashboard-filter/index.vue'
export default {
  name: 'GridSetting',
  components: { Index, draggable },
  data () {
    return {
      dataSource: [],
      dataSourceColumns: [],
      activeSetting: 'gridSetting',
      gridLinesOptions: ['Default', 'Both', 'None', 'Horizontal', 'Vertical'],
      columnTemplates: ['linkFormat', 'boolFormat', 'progessFormat', 'dateFormat', 'progessFullFormat', 'ticketLinkFormat', 'timeEntryLinkFormat', 'textFormat'],
      expandAllColumn: false,
      setting: {
        headerTitle: '',
        headerDescription: '',
        drillThroughStatus: true,
        report: {
          searchSettings: {},
          sortSettings: {},
          filterSettings: {},
          toolbar: ['ColumnChooser'],
          allowSorting: true,
          allowTextWrap: true,
          allowPaging: true,
          subtasks: '',
          groupFields: '',
          pageSettings: { pageSize: 100, pageSizes: [10, 50, 100, 200, 1000], pageCount: 4 },
          columns: [

          ]
        }

      }
    }
  },
  props: [
    'data', 'fieldsList'
  ],
  watch: {
    data (value, oldValue) {
      return this.updateSetting(value)
    },
    fieldsList (val) {
      let temp = []
      this.dataSourceColumns = []
      val.forEach(item => {
        temp.push(item.name)
      })
      this.dataSourceColumns = temp
    },
    'setting.report.columns': {
      handler: function (val) {
        var res = val.every(item => item.showSetting)
        var result = val.find(item => !item.showSetting)
        if (res) {
          this.expandAllColumn = true
        } else if (result) {
          this.expandAllColumn = false
        }
      },
      deep: true
    }
  },

  created () {
    if (this.data) {
      this.$set(this.data)
    }
    this.expandAllColumn = false
  },
  methods: {
    getData () {
      return this.setting
    },
    subtasksChange (val) {
      if (val) {
        this.setting.report.subtasks = val
      } else {
        this.setting.report.subtasks = null
      }
      this.$forceUpdate()
    },
    groupFieldsChange (val) {
      if (val) {
        this.setting.report.groupFields = val
      } else {
        this.setting.report.groupFields = null
      }
      this.$forceUpdate()
    },
    toggleVisible (index, visible) {
      this.$set(this.setting.report.columns[index], 'visible', !visible)
      this.$forceUpdate()
    },
    showSettingClick (index, showSetting) {
      this.$set(this.setting.report.columns[index], 'showSetting', !showSetting)
      this.$forceUpdate()
    },
    expandAll (val) {
      this.setting.report.columns.filter(item => item.visible).forEach(item => {
        item.showSetting = val
      })
    },
    setColumns (dataSourceColumns) {
      this.setting.report.columns = dataSourceColumns
      this.$forceUpdate()
    },
    updateSetting (value, list, layerStatus) {
      let dataSourceColumns = []
      this._.merge(this.setting, value.gadgetSetting)
      this.setting.report.toolbar = value.gadgetSetting.report.toolbar
      this.setting.report.subtasks = value.gadgetSetting.report.subtasks
      this.setting.report.groupFields = value.gadgetSetting.report.groupFields
      if (value && value.gadgetSetting && value.gadgetSetting.report &&
      value.gadgetSetting.report.columns && value.gadgetSetting.report.columns.length > 0 && !layerStatus) {
        dataSourceColumns = value.gadgetSetting.report.columns
      } else if (value && list) {
        list.forEach(item => {
          const itemObj = {
            field: item.name,
            headerText: item.name,
            textAlign: item.dbType === 'number' ? 'Right' : 'Left',
            allowEditing: true,
            allowFiltering: true,
            allowGrouping: false,
            allowReordering: true,
            allowSearching: true,
            allowSorting: true,
            autoFit: true,
            disableHtmlEncode: false,
            enableGroupByFormat: false,
            foreignKeyField: item.name,
            showColumnMenu: true,
            showInColumnChooser: true,
            sortDirection: 'Descending',
            type: this.convertType(item.dbType),
            template: null,
            visible: true,
            showSetting: false,
            //  headerTextTooltip: null,
            maxWidth: 'auto'
          }
          if (value.gadgetSetting && value.gadgetSetting.report && value.gadgetSetting.report.columns) {
            const obj = this._.find(value.gadgetSetting.report.columns, { field: item.name })
            if (obj) {
              dataSourceColumns.push(obj)
            } else {
              dataSourceColumns.push(itemObj)
            }
          } else {
            dataSourceColumns.push(itemObj)
          }
        })
      }
      this.setColumns(dataSourceColumns)
      this.$emit('update:data', this.setting)
      this.$forceUpdate()
      return dataSourceColumns
    },
    convertType (type) {
      return type
    },
    upSortClick (index) {
      let temp = this.setting.report.columns[index - 1]
      this.$set(this.setting.report.columns, index - 1, this.setting.report.columns[index])
      this.$set(this.setting.report.columns, index, temp)
      this.$forceUpdate()
    },
    downSortClick (index) {
      let temp = this.setting.report.columns[index + 1]
      this.$set(this.setting.report.columns, index + 1, this.setting.report.columns[index])
      this.$set(this.setting.report.columns, index, temp)
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss">
.grid-setting {

  .column-card {
    margin-top: 8px;
    }
    .el-card__body {
      padding: 5px 20px !important;
    }
    .column-field {
      font-weight: bold;
    }
    .column-type {
      color: #9ea1a7;
    }
    .column-link {
      float: left;
      border: none;
      margin-left:3px;
    }
    .el-form-item .el-form-item {
      margin-bottom: 4px;
    }
}

</style>
<style scoped lang="scss">
.chosen {
            // border: solid 2px #3089dc !important;
        }
    .mover {
            // padding: 6px;
            // background-color: #fdfdfd;
            // border: solid 1px #eee;
            // margin-bottom: 10px;
            cursor: move;
            // width: 343px;
        }
#grid-setting ::v-deep .el-switch__label.is-active{
  background-color: #fff!important
}
</style>
